<template>
  <div id="center" style="overflow: hidden;">
    <div class="content">
      <LeftMenu></LeftMenu>
      <RightMenu></RightMenu>
    </div>
    <!-- 歌词显示 -->
    <div :class="getShowTilt === true ? 'tilt' : '' " v-show="isShowTilt">
      <div class="lyric_content">
        <div class="close_tilt" @click="closeTilt">
          <img src="../../assets/images/resizeApi.png" />
        </div>
        <div class="animation">
          <div class="player_con" :class="{'playing':isPlaying}">
            <img src="../../assets/images/player_bar.png" class="play_bar" />
            <div class="disc_box">
              <img src="../../assets/images/disc.png" class="disc autoRotate" />
              <img :src="getNowMusicMenu.al.picUrl" class="cover autoRotate" />
            </div>
            <div class="btn">
              <i class="iconfont icon-collectselected"></i>
              <i class="iconfont icon-folder-add"></i>
              <i class="iconfont icon-download"></i>
              <i class="iconfont icon-share"></i>
            </div>
          </div>
        </div>
        <div class="lyric">
          <div class="title_wrap">
            <h2>{{ getNowMusicMenu.name || getNowMusicMenu.al.name }}</h2>
            <div class="title_info">
              <span>专辑：<a>{{ getNowMusicMenu.name || getNowMusicMenu.al.name }}</a></span>
              <span>歌手：<a>{{ getNowMusicMenu.ar[0].name }}</a></span>
              <!-- <span>来源：<a>{{ getNowMusicMenu.ar[0].name }}</a></span> -->
            </div>
          </div>
          <div class="lyric_text" v-show="lyric">
            <span  v-for="(item, index) in lyric" :key="index">{{ item.txt }}</span>
          </div>
          <div v-show="!lyric" style="font-size: 20px;padding: 10px;">获取歌曲数据失败！</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LeftMenu from './left/LeftMenu.vue'
import RightMenu from './right/RightMenu.vue'
import { mapGetters } from 'vuex'
import Lyric from 'lyric-parser'
export default {
  name: 'center',
  components: {
    LeftMenu,
    RightMenu
  },
  data () {
    return {
      isShowTilt: false,
      musicCover: '',
      isPlaying: false,
      lyric: {}
    }
  },
  methods: {
    closeTilt () {
      this.isShowTilt = false
      this.$store.commit('setShowTilt', this.isShowTilt)
    }
  },
  created () {
    this.isShowTilt = this.getShowTilt
  },
  computed: {
    ...mapGetters(['getShowTilt', 'getNowMusicMenu', 'getIsPlay', 'getLyric'])
  },
  watch: {
    getShowTilt (newVal, oldVal) {
      this.isShowTilt = newVal
      // console.log(newVal)
    },
    getIsPlay (newVal, oldVal) {
      this.isPlaying = newVal
    },
    getLyric (newVal, oldVal) {
      this.lyric = new Lyric(this.getLyric, (obj) => {
        console.log(obj)
      }).lines
      console.log(this.lyric)
    }
  }
}
</script>

<style lang="less" scoped>
  #center {
    width: 100%;
    height: 86%;
    position: relative;
    // background-color: red;
    // overflow: hidden;
    .content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
    }
    .tilt {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 0;
      // text-align: right;
      background-color: #fff;
      box-shadow: inset 5px 5px 6px 8px rgba(0, 0, 0, 0.05);
      box-shadow: inset;
      z-index: 10;
      // -webkit-transition: width 1s, height 1s, -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
      // transition: width 1s, height 1s, transform 1s;
      animation:myfirst 0.8s;
      animation-fill-mode:forwards;
      -webkit-animation:myfirst 0.8s; /* Safari and Chrome */
      -webkit-animation-fill-mode:forwards;
      .lyric_content {
        position: relative;
        width: 1100px;
        // height: 600px;
        margin: auto;
        // background-color: #ff0000;
        display: flex;
        flex-direction: row;
        .close_tilt {
          position: absolute;
          top: 20px;
          right: 0;
          width: 40px;
          height: 40px;
          border: 1px solid #d5d5d5;
          border-radius: 5px;
          box-sizing: border-box;
          img {
            width: 80%;
            height: 80%;
            margin: 5px;
          }
        }
        .animation {
          width: 50%;
          height: auto;
          // height: 600px;
          // background-color: #aa0000;
          .player_con {
            width: 260px;
            margin: auto;
            // background-color: #EEEEEE;
            position: relative;
            .play_bar {
              position: absolute;
              top: 0;
              left: 50%;
              // float: right;
              margin-top: -9px;
              width: 92px;
              height: 128px;
              z-index: 3;
              transform: rotate(-30deg);
              transform-origin: 12px 12px;
              transition: 1s;
            }
            .disc_box {
              position: relative;
              top: 50px;
              width: 255px;
              height: 255px;
              .disc {
                z-index: 2;
              }
              .cover {
                position: absolute;
                top: 21%;
                left: 21%;
                width: 145px;
                height: 145px;
                border-radius: 50%;
                z-index: 1;
              }
            }
            .btn {
              margin-top: 100px;
              display: flex;
              justify-content: space-between;
              i {
                font-size: 25px;
                padding: 10px;
                background-color: #f5f5f5;
                border-radius: 50%;
              }
            }
          }
        }
        .lyric {
          width: 50%;
          // height: 600px;
          // background-color: #f30000;
          .title_wrap {
            width: 85%;
            margin-top: 40px;
            .title_info {
              display: flex;
              justify-content: space-between;
              span {
                margin: 10px 0;
                a {
                  color: #5c85b4;
                }
              }
            }
          }
          .lyric_text {
            margin-top: 10px;
            height: 400px;
            display: flex;
            flex-direction: column;
            overflow: auto;
            span {
              padding: 5px 0;
            }
          }
        }
      }
    }
  }
  @keyframes myfirst
  {
    from {
      width:0;
      height: 0;
    }
    to {
      width:100%;
      height: 100%;
    }
  }

  @-webkit-keyframes myfirst /* Safari and Chrome */
  {
    from {
      width:0;
      height: 0;
    }
    to {
      width:100%;
      height: 100%;
    }
  }

  /* 旋转的动画 */
  @keyframes Rotate {
      from {
          transform: rotateZ(0);
      }
      to {
          transform: rotateZ(360deg);
      }
  }

/* 旋转的动画 */
@keyframes Rotate {
    from {
        transform: rotateZ(0);
    }
    to {
        transform: rotateZ(360deg);
    }
}

/* 旋转的类名 */
.autoRotate {
    animation-name: Rotate;
    animation-iteration-count: infinite;
    animation-play-state: paused;
    animation-timing-function: linear;
    animation-duration: 5s;
}

/* 是否正在播放 */
.playing .disc,
.playing .cover {
    animation-play-state: running;
}

/* 播放杆 转回去 */
.playing .play_bar {
    transform: rotate(0)!important;
}
</style>
